<template>
      <div class="item__img">
        <img :src="rankListItem.coverImgUrl"  />
        <span class="item__img--des">{{rankListItem.updateFrequency}}</span>
      </div>
      <ul class="item__song">
        <li v-for="(item,index) in rankListItem.tracks" :key="index">
          {{`${index+1}.${item.first}-${item.second}`}}
        </li>
      </ul>
</template>
<script setup>
import { defineProps} from "vue";

defineProps({
  rankListItem:Object
})
</script>
<style lang="stylus">

.item__img
  position relative
  width 90px
  height 90px
  border-radius 10px
  overflow hidden
  .item__img--des
    position absolute
    bottom 0
    left 3px
    font-weight 300
    font-size 12px
    color white
  img
    width 100%
    height 100%
.item__song
  box-sizing border-box
  overflow hidden
  flex 1
  padding 0 14px
  li
    box-sizing border-box
    margin 10px 0 
    width 100%
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    color #9d9d9d
    font-weight 300
    font-size  13px
</style>